<!DOCTYPE html>
<html lang="en">
<head>


    <meta charset="utf-8">
    <title>大数据招聘数据分析系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="" name="author">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- App css -->
    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/app.min.css" rel="stylesheet" type="text/css">

</head>

<body id="body" class="dark-sidebar">
<!-- leftbar-tab-menu -->
<div class="left-sidebar">
    <!-- LOGO -->
    <div class="brand">
        <a href="" class="logo">
                    <span>
                        <img src="/static/static/picture/logo-sm.png" alt="logo-small" class="logo-sm">
                    </span>
            <span>
{#                        <img src="/static/static/picture/logo.png" alt="logo-large" class="logo-lg logo-light">#}
{#                        <img src="/static/static/picture/logo-dark.png" alt="logo-large" class="logo-lg logo-dark">#}
                        <span style="color: #fff">招聘数据分析可视化系统</span>
                    </span>
        </a>
    </div>
    <div class="sidebar-user-pro media border-end">
        <div class="position-relative mx-auto">
            <img src="/static/static/picture/user-4.jpg" alt="user" class="rounded-circle thumb-md">
            <span class="online-icon position-absolute end-0"><i class="mdi mdi-record text-success"></i></span>
        </div>
        <div class="media-body ms-2 user-detail align-self-center">
            <h5 class="font-14 m-0 fw-bold">{{ userInfo.username }}</h5>
            <p class="opacity-50 mb-0">用户名</p>
        </div>
    </div>
    <div class="border-end">
        <ul class="nav nav-tabs menu-tab nav-justified" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#Main" role="tab"
                   aria-selected="true"><span>主导航</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#Extra" role="tab"
                   aria-selected="false"><span>更多</span></a>
            </li>
        </ul>
    </div>
    <!-- Tab panes -->

    <!--end logo-->
    <div class="menu-content h-100" data-simplebar="">
        <div class="menu-body navbar-vertical">
            <div class="collapse navbar-collapse tab-content" id="sidebarCollapse">
                <!-- Navigation -->
                <ul class="navbar-nav tab-pane active" id="Main" role="tabpanel">
                    <li class="menu-label mt-0 text-primary font-12 fw-semibold"><span>导航栏</span><br><span
                            class="font-10 text-secondary fw-normal">Unique Dashboard</span></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarAnalytics" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarAnalytics">
                            <i class="ti ti-stack menu-icon"></i>
                            <span>数据可视化</span>
                        </a>
                        <div class="collapse " id="sidebarAnalytics">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/salaryChar/">薪资分析</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a href="/myApp/educationChar/" class="nav-link ">经验学历分析</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a href="/myApp/industryChar/" class="nav-link ">职业分析</a>
                                <li class="nav-item">
                                    <a href="/myApp/cityChar/" class="nav-link ">城市分析</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarAnalytics-->
                    </li><!--end nav-item-->

                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarCrypto" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarCrypto">
                            <i class="ti ti-forms menu-icon"></i>
                            <span>数据表格</span>
                        </a>
                        <div class="collapse " id="sidebarCrypto">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/tableData/">工作职位数据</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarCrypto-->
                    </li><!--end nav-item-->

                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarProjectsA" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarProjects">
                            <i class="ti ti-user menu-icon"></i>
                            <span>个人信息</span>
                        </a>
                        <div class="collapse " id="sidebarProjectsA">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/changeInfo/">信息管理</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/collectData/">收藏数据</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarProjects-->
                    </li><!--end nav-item-->
                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarProjectsB" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarProjects">
                            <i class="ti ti-cloud menu-icon"></i>
                            <span>数据词云图</span>
                        </a>
                        <div class="collapse " id="sidebarProjectB">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/titleCloud/">工作词云</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/tagCloud/">工作标签词云</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarProjects-->
                    </li><!--end nav-item-->
                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarProjectsC" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarProjects">
                            <i class="ti ti-star menu-icon"></i>
                            <span>职位推荐</span>
                        </a>
                        <div class="collapse " id="sidebarProjectsC">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/recommendPage/">职位推荐</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarProjects-->
                    </li><!--end nav-item-->
                    

                </ul>
                <ul class="navbar-nav tab-pane" id="Extra" role="tabpanel">
                    <li>
                        <div class="update-msg text-center position-relative">
                            <button type="button" class="btn-close position-absolute end-0 me-2"
                                    aria-label="Close"></button>
                            <img src="/static/static/picture/speaker-light.png" alt="" class="" height="110">
                            <h5 class="mt-0">更多信息</h5>
                            <p class="mb-3">请访问BOSS直聘官网</p>
                            <a href="https://www.zhipin.com/" class="btn btn-outline-warning btn-sm">访问</a>
                        </div>
                    </li>
                </ul><!--end navbar-nav--->
            </div><!--end sidebarCollapse-->
        </div>
    </div>
</div>
<!-- end left-sidenav-->
<!-- end leftbar-menu-->

<!-- Top Bar Start -->
<!-- Top Bar Start -->
<div class="topbar">
    <!-- Navbar -->
    <nav class="navbar-custom" id="navbar-custom">
        <ul class="list-unstyled topbar-nav float-end mb-0">
           

            <li class="dropdown">
                <a class="nav-link dropdown-toggle nav-user" data-bs-toggle="dropdown" href="#" role="button"
                   aria-haspopup="false" aria-expanded="false">
                    <div class="d-flex align-items-center">
                        <img src="/static/static/picture/user-4.jpg" alt="profile-user"
                             class="rounded-circle me-2 thumb-sm">
                        <div>
                            <small class="d-none d-md-block font-11">{{ userInfo.username }}</small>
                            <span class="d-none d-md-block fw-semibold font-12">用户 <i
                                    class="mdi mdi-chevron-down"></i></span>
                        </div>
                    </div>
                </a>
                <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item" href="#"><i class="ti ti-user font-16 me-1 align-text-bottom"></i> 个人信息</a>
                    <a class="dropdown-item" href="/myApp/home/"><i
                            class="ti ti-chart-area-line font-16 me-1 align-text-bottom"></i> 可视化大屏</a>
                    <div class="dropdown-divider mb-0"></div>
                    <a class="dropdown-item" href="/myApp/logOut"><i
                            class="ti ti-power font-16 me-1 align-text-bottom"></i> 退出登录</a>
                </div>
            </li><!--end topbar-profile-->
            
        </ul><!--end topbar-nav-->

        <ul class="list-unstyled topbar-nav mb-0">
            <li>
                <button class="nav-link button-menu-mobile nav-icon" id="togglemenu">
                    <i class="ti ti-menu-2"></i>
                </button>
            </li>
           
        </ul>
    </nav>
    <!-- end navbar-->
</div>
<!-- Top Bar End -->
<!-- Top Bar End -->

<div class="page-wrapper">

    <!-- Page Content-->
    <div class="page-content-tab">

        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">系统</a>
                                </li><!--end nav-item-->
                                <li class="breadcrumb-item"><a href="#">数据可视化</a>
                                </li><!--end nav-item-->
                                <li class="breadcrumb-item active">城市分析</li>
                            </ol>
                        </div>
                        <h4 class="page-title">城市分析</h4>
                    </div><!--end page-title-box-->
                </div><!--end col-->

            </div>
            <!-- end page title end breadcrumb -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h4 class="card-title">选择列表</h4>
                                </div><!--end col-->
                            </div>  <!--end row-->
                        </div><!--end card-header-->
                        <script>
                            function cityChange(e) {
                                location.href = '?city=' + e.target.value
                            }
                        </script>
                        <div class="card-body">
                            <div class="mb-3 row">
                                <label class="col-sm-1 col-form-label text-end">城市选择</label>
                                <div class="col-sm-3">
                                    <select onchange="cityChange(event)" class="form-select"
                                            aria-label="Default select example">
                                        {% for i in selectList %}
                                            {% if i == defaultCity %}
                                                <option selected value="{{ i }}">{{ i }}</option>
                                            {% else %}
                                                <option | value="{{ i }}">{{ i }}</option>
                                            {% endif %}
                                        {% endfor %}

                                    </select>
                                </div>
                            </div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->

            </div><!--end row-->
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h4 class="card-title">薪资分布情况</h4>
                                </div><!--end col-->
                            </div>  <!--end row-->
                        </div><!--end card-header-->
                        <div class="card-body">
                            <div id="main1" style="width: 100%;height: 550px;"></div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h4 class="card-title">公司规模分析</h4>
                                </div><!--end col-->
                            </div>  <!--end row-->
                        </div><!--end card-header-->
                        <div class="card-body">
                            <div id="main2" style="width: 100%;height: 550px;"></div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->
            </div><!--end row-->


        </div><!-- container -->

        <!--Start Rightbar-->
        <!--Start Rightbar/offcanvas-->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="Appearance" aria-labelledby="AppearanceLabel">
            <div class="offcanvas-header border-bottom">
                <h5 class="m-0 font-14" id="AppearanceLabel">Appearance</h5>
                <button type="button" class="btn-close text-reset p-0 m-0 align-self-center" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <h6>Account Settings</h6>
                <div class="p-2 text-start mt-3">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch1">
                        <label class="form-check-label" for="settings-switch1">Auto updates</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch2" checked="">
                        <label class="form-check-label" for="settings-switch2">Location Permission</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="settings-switch3">
                        <label class="form-check-label" for="settings-switch3">Show offline Contacts</label>
                    </div><!--end form-switch-->
                </div><!--end /div-->
                <h6>General Settings</h6>
                <div class="p-2 text-start mt-3">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch4">
                        <label class="form-check-label" for="settings-switch4">Show me Online</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch5" checked="">
                        <label class="form-check-label" for="settings-switch5">Status visible to all</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="settings-switch6">
                        <label class="form-check-label" for="settings-switch6">Notifications Popup</label>
                    </div><!--end form-switch-->
                </div><!--end /div-->
            </div><!--end offcanvas-body-->
        </div>
        <!--end Rightbar/offcanvas-->
        <!--end Rightbar-->

        <!--Start Footer-->
        <!-- Footer Start -->
        {#                <footer class="footer text-center text-sm-start">Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></footer>#}
        <!-- end Footer -->
        <!--end footer-->
    </div>
    <!-- end page content -->
</div>
<!-- end page-wrapper -->

<!-- Javascript  -->

<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/analytics-index.init.js"></script>


<!-- App js -->
<script src="/static/static/js/app.js"></script>

</body>
<!--end body-->
<script src="/static/static/js/echarts.js"></script>
<script>
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        color: ['#80FFA5'],
        title: {
            {#text: 'Gradient Stacked Area Chart'#}
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            {#data: {{ citySalaryX | safe }}#}
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: {{ citySalaryX | safe }}
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '数量',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(128, 255, 165)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(1, 191, 236)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: {{ citySalaryY | safe }}
            }
        ]
    };

    option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '公司人数',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: {{ cityPeopleReal | safe }}
            }
        ]
    };

    option && myChart.setOption(option);
</script>
</html>